<!-- eslint-disable vue/html-self-closing -->
<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{ total }} 条</span>
        </template>
        <template #right>
          <el-button v-allow="'import_excel'" type="warning" size="small">excel导入</el-button>
          <el-button v-allow="'export_excel'" type="danger" size="small" @click="dExportExcel">
            excel导出
          </el-button>
          <el-button v-allow="'add'" type="primary" size="small" @click="doadd">
            新增员工
          </el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px">
        <el-table
          border
          :data="list"
          :default-sort="{ prop: 'timeOfEntry', order: 'descending' }"
        >
          <!-- :default-sort="{ prop: 'timeOfEntry', order: 'descending' }"    页面进来对入职时间进行自动排序 -->
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="用户头像">
            <template #default="{ row }">
              <img
                :src="row.staffPhoto"
                alt=""
                style="width: 100%"
                @click="showQrCode(row.staffPhoto)"
              />
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="{ row }">
              {{ formatHireType(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable />
          <!-- <el-table-column label="账户状态" /> -->
          <el-table-column label="操作" width="280">
            <template #default="{ row }">
              <!-- 路由传参方式一 查询参数传递  @click="$router.push('/employees/detail?id=${row.id}')" -->
              <!-- 方式er  路径传参  需要在路由上添加接受配置   @click="$router.push('/employees/detail/${row.id}')"-->
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >
                查看
              </el-button>
              <el-button type="text" size="small" @click="hAssign(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="hDel(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="total,sizes,prev,pager,next,jumper"
            :current-page.sync="page"
            :page-sizes="[2, 3, 5, 8, 10]"
            :page-size="size"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
      <!--新增的弹框 -->
      <el-dialog title="新增员工" :visible.sync="showDialog" @close="hClose">
        <!-- v-if="showDialog"   也可以进行表单重置 -->
        <addEidet v-if="showDialog" ref="myEmp" @success="hSuccess" />
      </el-dialog>
      <!-- 分配权限的弹框 -->
      <el-dialog :visible.sync="assignShowDialog" title="分配角色">
        <assign v-if="assignShowDialog" :user-id="userId" @success="assignShowDialog=false"></assign>
      </el-dialog>
      <!-- 二维码弹框 -->
      <el-dialog title="二维码" :visible.sync="showCodeDialog">
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import assign from './assignRole.vue'
import addEidet from './empDialog.vue'
import { getEmployeeList, delEmployee } from '@/api/employees'
import employeesEnum from '@/constant/employees'
import QrCode from 'qrcode'
// const hireType = {}
// employeesEnum.hireType.forEach((item) => {
//   hireType[item.id] = item.value
// })
// console.log(hireType)
const hireType = employeesEnum.hireType.reduce((acc, item) => {
  acc[item.id] = item.value
  return acc
}, {})
export default {
  components: {
    addEidet,
    assign
  },
  data() {
    return {
      showCodeDialog: false, // /二维码弹框
      assignShowDialog: false, // 控制分配角色的弹框
      showDialog: false,
      list: [], // 渲染页面的数据
      page: 1, // 当前页
      size: 5, // 每页多少数据
      total: 0, // 总数量
      userId: ''
    }
  },
  created() {
    this.loadEmployeeList()
  },
  methods: {
    // 点击图片显示二维码的方法
    showQrCode(url) {
      // url存在的情况下 才弹出层
      if (url) {
        this.showCodeDialog = true // 数据更新了 但是我的弹层会立刻出现吗 ？页面的渲染是异步的！！！！
        // 有一个方法可以在上一次数据更新完毕，页面渲染完毕之后
        this.$nextTick(() => {
          // 此时可以确认已经有ref对象了
          QrCode.toCanvas(this.$refs.myCanvas, url) // 将地址转化成二维码
          // 如果转化的二维码后面信息 是一个地址的话 就会跳转到该地址 如果不是地址就会显示内容
        })
      } else {
        this.$message.warning('该用户还未上传头像')
      }
    },
    // 分配角色
    hAssign(id) {
      this.assignShowDialog = true
      this.userId = id
    },
    // 导出excel
    dExportExcel() {
      const { tHeader, result } = this.formatToExcel(this.list)
      console.log(tHeader, 'tHeader')
      console.log(result, 'result')
      // 懒加载读取模块
      import('@/vendor/Export2Excel').then((excel) => {
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // 获取的数据
        // const list = this.list
        // const data = this.formatJson(filterVal, list)
        // 将数据写入到Excel当中
        excel.export_json_to_excel({
          header: tHeader,
          data: result,
          filename: '', // 下载的文件名
          autoWidth: true, // 宽度自适应
          bookType: 'xlsx' // 导入的文件的类型
        })
      })
    },
    formatToExcel(list) {
      //    中引文的映射对象
      const mapInfo = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }

      // tHeader = ['编号','密码','手机号','姓名','入职日期',.......]
      // 1 生成表头
      // tHeader  ---> ['转正日期', '部门', '聘用形式', '编号', '手机号', '密码', '头像地址', '入职日期', '姓名', '工号']
      const one = list[0]
      if (!one) return
      const tHeader = Object.keys(one).map((en_key) => {
        return mapInfo[en_key]
      })
      // 2 生成表的内容data
      const result = list.map((item) => {
        return Object.values(item)
      })
      return { tHeader, result }
    },
    hDel(id) {
      this.$confirm('宁确定要删除吗?')
        .then(async() => {
          const res = await delEmployee(id)
          console.log(res)
          if (this.list.length === 1) {
            this.page--
            if (this.page <= 0) {
              this.page = 1
            }
          }
          if (res.code === 10000) {
            this.loadEmployeeList()
          }
        })
        .catch((error) => console.log(error))
    },
    hClose() {
      // this.$refs.myEmp.restForm()
    },
    // 关闭子组件弹框
    hSuccess() {
      this.showDialog = false
      this.total++
      this.page = Math.ceil(this.total / this.size)
      // 重新获取页面
      this.loadEmployeeList()
    },
    // 格式化聘用形式的数据
    formatHireType(value) {
      // const obj = employeesEnum.hireType.find((item) => item.id === value)
      // return obj ? obj.value : '未知'
      return hireType[value] || '未知'
    },

    async loadEmployeeList() {
      try {
        const res = await getEmployeeList(this.page, this.size)
        console.log(res, 'res')
        // 将请求的数据赋值给列表
        this.list = res.data.rows
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      }
    },
    // 当每页显示的条数切换时进行触发,val是每页的条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      // 点一下就将页码变成1
      this.page = 1
      this.size = val
      // 然后重新请求数据
      this.loadEmployeeList()
    },
    // 当每页进行切换时触发,val---当前的页码值
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      // 点一下页码就加一
      this.page = val
      // 然后重新发送请求,获取响应的数据
      this.loadEmployeeList()
    },
    doadd() {
      this.showDialog = true
    }
  }
}
</script>
